<script setup>
import {ref} from "vue";
const keyword = ref('')
console.log()
</script>
<template>
  <el-row justify-center>
    <el-col :span="10" :xs="24" style="margin: 10px auto">
      <el-input
          v-model="keyword"
          placeholder="请输入文章关键词"
          class="input-with-select">
        <template #append>
          <el-button @click="$router.push({name:'Search',query:{keyword:keyword}})">搜索</el-button>
        </template>
      </el-input>



    </el-col>
  </el-row>
</template>
<style scoped>
.search {
  border-radius: 50px;
  border: 2px solid #409EFF;

}

.search :deep(.el-input__wrapper),
.search :deep(.el-input__wrapper .is-focus) {
  border: none;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  box-shadow: none;
}

.search :deep(.el-input-group__append) {
  background-color: #409EFF !important;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  border: none;
  box-shadow: none;
}

.search :deep(.el-button),
.search :deep(.el-button:hover) {
  background-color: #409EFF;
  color: #fff;
}
</style>
